用duo等工具实现文件模块化后,引入Backbone来加强项目的MVC结构。
官方教程,是自上而下的从概念来描述原理,适合有基础的同学学习,但做为由浅入深的学习路径,还是需要自己手动一步一步学习。
本文参考了这个简易教程,但由于backbone后期版本变化,针对原文内容有修改。
从View开始说起
传统上用jQuery操作DOM,就类似C语言中的goto语句,随着项目复杂度增大,会越来越难以维护。
关于MVC(以及后续的MVP,MVVM),网上资源很多,就不展开。我们直接用代码来操练。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Backbone</title>
</head>
<body>
<div class="wrapper"></div>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/backbone-min.js"></script>
<script src="build/x.js"></script>
</body>
</html>
其中,x.js是用duo生成后的js。文件中引用的几个js,都可以从百度静态资源库中下载到
1.js
var ListView = Backbone.View.extend({
//el: $('.wrapper'),
// 初始化函数,new时,backbone会自动调用
initialize: function() {
this.render();
},
// 真正把修改操作同步到浏览器中
render: function() {
this.$el.append("<ul><li>Hello techfellow!</li></ul>");
}
});
var listView = new ListView({el: $('.wrapper')});
执行:
$duo 1.js
知识点说明
el:表示该View所代表的DOM元素,在render函数中,会同步到DOM操作中去。
initialze:调用new时,会触发的函数调用,类似构造函数。
render:触发DOM操作,浏览器会渲染
最后一句,说明在new时,可以传递参数
疑惑
在作者的文档中,有一句
If the element already exists in the page, you can set el as a CSS selector that matches the element.
el: '.wrapper'
即:如果写成 new ListView({el: '.wrapper'})也是可以的。
但考虑到el本身的含义,还是加上$更清晰些。
$el和$()
$(this.el)
等价于 this.$el
$(this.el).find('.wrapper')
等价于 this.$('.wrapper')
setElement
如果想修改el内容,包括值和绑定事件,可以使用setElement。下面这个例子中,setElement不仅仅把el的引用从button1改为button2,连click事件也同步修改过去了。
// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');
// Define a new view
var View = Backbone.View.extend({
events: {
click: function(e) {
console.log(view.el === e.target);
}
}
});
// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});
// Apply the view to button2 using setElement
view.setElement(button2);
button1.trigger('click');
button2.trigger('click'); // returns true
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。